<template>
  <PageWrapper dense contentFullHeight contentClass="flex" class="p-4">
    <TypeTree class="w-1/5 xl:w-1/5" @select="handleRoleTypeSelect" />
    <UserTable class="w-4/5 xl:w-4/5 ml-2 mr-2" ref="usertableRef" />
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';

import TypeTree from './TypeTree.vue';
import UserTable from './UserTable.vue';



export default defineComponent({
  components: { BasicTable, PageWrapper, TypeTree, UserTable, TableAction },
  setup() {
    const usertableRef = ref(); // usertable.vue的引用
    function handleRoleTypeSelect(roleId = '') {
      usertableRef.value.filterByRoleType(roleId);   
    }
    return {
      usertableRef,
      handleRoleTypeSelect,
    };
  },
});
</script>
